<template>
  <div class="searchPage-top">
    <div class="searchPage-top-inner">
      <div class="searchPage-top-input">
        <input type="text" class="searchInput" v-model.trim.lazy="state.searchContent"  @keydown.enter="TgetArticleListBySearchContent"/>
      </div>
      <div class="searchPage-top-btn">
        <button class="searchBtn" @click="TgetArticleListBySearchContent">C一下</button>
      </div>
    </div>
  </div>
</template>

<script>
import {getArticleListBySearchContent} from "@/api/article";

export default {
  name: "SearchPageTop",
  data(){
    return{
      state:{
      }
    }
  },
  methods:{
    TgetArticleListBySearchContent(){
      getArticleListBySearchContent(this.state.searchContent).then(articleList=>{
      this.$store.commit('SEARCH',this.state.searchContent)
        this.$store.commit("commitSearch",articleList)
      })
    }

  },
  mounted() {
    this.state=this.$store.state;
  }


}
</script>

<style >
.searchPage-top{
  width: 100%;
  height: 43px;
  display: flex;
  justify-content: center;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 4px 14px 0 rgb(0 0 0 / 12%) !important;
}
.searchPage-top-inner{
  display: flex;
  width: 1371px;
}
.searchPage-top-input{
  width: 900px;
}

.searchBtn{
  background-color: #639c1a;
  width: 120px!important;
  color: white;
  font-size: medium;
  height: 43px;
  border: none;
  margin-top: 1px;
  cursor: pointer;

}
.searchBtn:hover{

}
.searchInput{
  margin-top: 2px;
  border: 1px solid rgba(124, 129, 137, 0.2);
  width: 100%;
  height: 38px;
  padding: 10px 10px ;
   border-bottom: 0px;

}
.searchInput:hover{
  outline: 1px solid #639c1a;
}
.searchInput:focus{
  outline: 1px solid #639c1a;
}

</style>